<template>
    <div class="drawback">
        <van-nav-bar title="申请退款" left-text="返回全部订单" left-arrow @click-left="onClickLeft" />
        <div class="top">
            <van-form @submit="onSubmit">
                <div class="xzq">
                    <van-field readonly clickable name="reasonstate" required :value="value" label="退款原因" placeholder="请选择"
                        @click="showPicker = true" input-align="right"
                        :rules="[{ required: true, message: '请选择退款原因' }]" />
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
                    </van-popup>
                    <van-field label="退款金额" name="refundprice" v-model="price" required  input-align="right"  error/>
                </div>
                <div class="bottom">
                    <h4>补充描述与凭证</h4>
                    <van-field v-model="message" rows="2" autosize name="reasoncontent" type="textarea" maxlength="50"
                        placeholder="补充描述，有助于商家更好的处理售后问题" show-word-limit />
                    <van-field name="uploader">
                        <template #input>
                            <van-uploader v-model="fileList" :before-read="beforeRead" :after-read="afterRead" :before-delete="deleteFile" :max-size="2 *1024 * 1024" :max-count="3" accept="image/*" multiple/>
                        </template>
                    </van-field>
                </div>
                <div class="refer">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script>
import frontUploadFileMixin from '@/mixin/frontuploadossfile.js';
import frontDeleteFileMixin from '@/mixin/frontdeleteossfile.js';
export default {
    data() {
        return {
            value: "",
            price: "",
            order_no:"",
            columns: ['不喜欢/不想要', '未收到商品', '其他原因'],
            showPicker: false,
            message: "",
            fileList: [],
            item:""
        };
    },
    mixins: [frontUploadFileMixin, frontDeleteFileMixin],
    methods: {
        onClickLeft() {
            this.$router.push({ name: "myallorders", query: { active: 2 } });
        },
        async onSubmit(values) {
            values.id=this.$route.query.id;
            let urlarr=[];
            for(let i=0; i<this.fileList.length;i++){
                urlarr.push(this.fileList[i].url);
            }
            let urls=urlarr.toString();
            values.uploader=urls;
            values.order_no=String(this.order_no);
            let res= await this.$frontaxios.post(this.$front.addRefundOrder,values)
            console.log(res);
            if(res.code==1){
                this.$dialog.alert({title:"温馨提示",message:"退款申请成功,你已经成功退款"});
            }else if(res.code==-2){
                this.$dialog.alert({title:"温馨提示",message:"退款状态更新失败"});
            }
            else if(res.code==-3||res.code==-1){
                this.$dialog.alert({title:"温馨提示",message:"退款失败，请联系客服"});
            }else if(res.code==-4){
                this.$dialog.alert({title:"温馨提示",message:"你已经成功退款，请勿重复提交"});
            }
        },
        onConfirm(value) {
            this.value = value;
            this.showPicker = false;
        },
        // 返回布尔值
        beforeRead(file) {
        if (!Array.isArray(file)) {
               file = [file]
        }
         for(let i=0;i<file.length;i++){
            if(file[i].type !== 'image/jpeg' && file[i].type !== 'image/png'){
                this.$dialog.alert({title: '温馨提示',message:'请上传 jpg或png 格式图片'});
                return false;
                 }
            }
           return true;
      },
       async afterRead(file) {
        if (!Array.isArray(file)) {
               file = [file]
        }
        let shopname=localStorage.getItem('shopname');
        let phone=localStorage.getItem('phone');
        let path='image/refund/'+phone+'/'+shopname+'/';
        for (let i = 0; i < file.length; i++) {
        let fileUrl = file[i].file;
        file[i].status = 'uploading';
        file[i].message = '上传中...';
        let url = await this.frontFileUpload(fileUrl, path + file[i].file.name, i, this, this.$front.frontuserbucket); //上传到oss
        file[i].url=url;
        file[i].status = 'done'
        file[i].message = '上传成功'
        file[i].path=path + file[i].file.name;
      }
      console.log(this.fileList);
    },
    async deleteFile(file){
        this.deletefrontMultiFile([file.path]);
    }
},
    async created(){
        let id=this.$route.query.id;
        let res=await this.$frontaxios.post(this.$front.getOneOrder,{id});
        if(res.code==1){
            this.price=res.data.paid_fee;
            this.order_no=res.data.order_no;
            //this.payprice=res.data.paid_fee;
        }
    }
}
</script>
<style scoped>
.drawback {
    background-color: #F5F4F4;
    height: 100%;
    width: 100%;
}

.top {
    width: 95%;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    border-radius: 1rem;
}

.van-form,
.van-cell {
    border-radius: 1rem;

}

.xzq {
    background-color: #fff;
    border-radius: 1rem;
}

.bottom {
    margin-top: 1rem;
    background-color: #fff;
    border-radius: 1rem;
}

 h4 {
    margin-left: 1rem;
    padding-top: 0.5rem;
}

.refer {

    width: 100%;
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
}
.van-button {
    margin: auto;
    width: 90%;
}
</style>
